{% extends 'layout.html' %}
{% block content %}
{% load static %}
<link href="{% static 'css/index.css' %}" rel="stylesheet"> <!-- 自定义样式 -->
<main>
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="bd-placeholder-img" style="background-image: url('{% static 'image/pictrues/food1.png' %}'); height: 50vh; background-size: cover; background-position: center;"></div>
                <div class="container">
                    <div class="carousel-caption text-start">
                        <h1>美食推荐</h1>
                        <p>本系统收录大量美食，去寻找您的所爱。</p>
                        <p><a class="btn btn-lg btn-primary" href="/myapp/list/">前往探索</a></p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="bd-placeholder-img" style="background-image: url('{% static 'image/pictrues/food2.png' %}'); height: 50vh; background-size: cover; background-position: center;"></div>
                <div class="container">
                    <div class="carousel-caption">
                        <h1>美食分析</h1>
                        <p>查看本站美食数据的相关数据分析。</p>
                        <p><a class="btn btn-lg btn-primary" href="/myapp/analysis/">了解更多</a></p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="bd-placeholder-img" style="background-image: url('{% static 'image/pictrues/food3.png' %}'); height: 50vh; background-size: cover; background-position: center;"></div>
                <div class="container">
                    <div class="carousel-caption text-end">
                        <h1>管理美食</h1>
                        <p>个性化管理您的美食，为喜欢的美食点个爱心！</p>
                        <p><a class="btn btn-lg btn-primary" href="/myapp/favorite/">浏览收藏</a></p>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一张</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一张</span>
        </button>
    </div>

    <div class="container marketing mt-5">
        <div class="row">
            <!-- 云南美食 -->
            <div class="col-lg-3">
                <div class="bd-placeholder-img rounded-circle" style="background-image: url('http://img.xiaochushuo.com/web/258291728.jpg!s4'); background-size: cover; height: 140px; width: 140px;"></div>
                <h2 class="fw-normal">云南美食</h2>
                <p>体验云南独特的风味菜肴。</p>
                <p><a class="btn btn-secondary" href="/myapp/list/?type=云南">查看详情 &raquo;</a></p>
            </div>
            <!-- 四川美食 -->
            <div class="col-lg-3">
                <div class="bd-placeholder-img rounded-circle" style="background-image: url('http://img.xiaochushuo.com/web/262750396.jpg!s4'); background-size: cover; height: 140px; width: 140px;"></div>
                <h2 class="fw-normal">四川美食</h2>
                <p>四川麻辣火锅与地道小吃等你来。</p>
                <p><a class="btn btn-secondary" href="/myapp/list/?type=四川">查看详情 &raquo;</a></p>
            </div>
            <!-- 粤菜 -->
            <div class="col-lg-3">
                <div class="bd-placeholder-img rounded-circle" style="background-image: url('http://img.xiaochushuo.com/web/264168037.jpg!s4'); background-size: cover; height: 140px; width: 140px;"></div>
                <h2 class="fw-normal">广东美食</h2>
                <p>广东的经典美食。</p>
                <p><a class="btn btn-secondary" href="/myapp/list/?type=粤菜">查看详情 &raquo;</a></p>
            </div>
            <!-- 鲁菜 -->
            <div class="col-lg-3">
                <div class="bd-placeholder-img rounded-circle" style="background-image: url('http://img.xiaochushuo.com/web/254241536.jpg!s4'); background-size: cover; height: 140px; width: 140px;"></div>
                <h2 class="fw-normal">山东美食</h2>
                <p>源自齐鲁大地的传统美食。</p>
                <p><a class="btn btn-secondary" href="/myapp/list/?type=鲁菜">查看详情 &raquo;</a></p>
            </div>
        </div>
    </div>
    

    <!-- START THE FEATURETTES -->
    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading fw-normal lh-1">云南美食 <span class="text-muted">令人垂涎。</span></h2>
            <p class="lead">云南菜以酸辣为主，融合多民族风味，独具特色。尝尝云南的过桥米线，定会让你陶醉。</p>
        </div>
        <div class="col-md-5">
            <div class="featurette-image img-fluid mx-auto" style="background-image: url('https://img.zcool.cn/community/01b6335fa10caf11013fdcc733dc31.jpg?imageMogr2/format/webp'); background-size: cover; height: 500px;"></div>
        </div>
    </div>
    
    <hr class="featurette-divider">
    
    <div class="row featurette">
        <div class="col-md-7 order-md-2">
            <h2 class="featurette-heading fw-normal lh-1">四川火辣 <span class="text-muted">麻辣诱惑。</span></h2>
            <p class="lead">四川菜以麻辣为主，辣味十足，给你前所未有的味觉冲击。来一份麻辣火锅，感受四川的辣味激情。</p>
        </div>
        <div class="col-md-5 order-md-1">
            <div class="featurette-image img-fluid mx-auto" style="background-image: url('https://img.zcool.cn/community/01l7ealpypxlxuartz15xe3134.jpg?imageMogr2/format/webp'); background-size: cover; height: 500px;"></div>
        </div>
    </div>
    
    <hr class="featurette-divider">
    
    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading fw-normal lh-1">经典粤菜 <span class="text-muted">口味清新。</span></h2>
            <p class="lead">粤菜以精致和清淡著称，口感清新，融合了多种烹饪技巧。让我们一同品味广东的美食之道。</p>
        </div>
        <div class="col-md-5">
            <div class="featurette-image img-fluid mx-auto" style="background-image: url('https://img.zcool.cn/community/01b47a6191ff3811013e662a989664.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp'); background-size: cover; height: 500px;"></div>
        </div>
    </div>
    
    <hr class="featurette-divider">
    
    <div class="row featurette">
        <div class="col-md-7  order-md-2">
            <h2 class="featurette-heading fw-normal lh-1">鲁菜经典 <span class="text-muted">味道浓烈。</span></h2>
            <p class="lead">鲁菜以味道浓烈、注重烹饪技巧而著称。来一份传统的鲁菜大餐，感受浓汤的魅力。</p>
        </div>
        <div class="col-md-5  order-md-1">
            <div class="featurette-image img-fluid mx-auto" style="background-image: url('https://k.sinaimg.cn/n/sinacn/w1600h1200/20180311/1959-fxpwyhw9272400.jpg/w700d1q75cms.jpg'); background-size: cover; height: 500px;"></div>
        </div>
    </div>
    
    <hr class="featurette-divider">
    

    <!-- Footer -->
    <footer class="container mt-5">
        <p class="float-end"><a href="#top">返回顶部</a></p>
        <p>&copy; 2024 美食推荐系统 &middot;</p>
    </footer>

</main>

{% endblock %}
